<script type="text/javascript">//<![CDATA[
	XHR.poll(10, '<%=luci.dispatcher.build_url("admin", "services", "apfreeWifiDog", "getClientList")%>', null,
		function(x, rp)
		{
			var sa = document.getElementById('wifidog-status');
			var tb = document.getElementById('client-list');
			if (rp && tb && sa)
			{
				if(rp.code == "1")
				{
					sa.style.color = "red";
					sa.innerHTML = "<%:WifiDog 程序未启动%>";
				}
				
				if(rp.uptime)
				{
					sa.style.color = "green";
					sa.innerHTML = '已运行 ' + rp.uptime;				
				}
				
				/* clear all rows */
				while( tb.rows.length > 1 )
					tb.deleteRow(1);
				
				var st = rp.clients ? rp.clients : "";
				for( var i = 0; i < st.length; i++ )
				{
					var timestr = String.format('%t', st[i].logintime);

					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);

					tr.insertCell(-1).innerHTML = st[i].hostname ? st[i].hostname : '?';
					tr.insertCell(-1).innerHTML = st[i].ipaddr;
					tr.insertCell(-1).innerHTML = st[i].macaddr;
					tr.insertCell(-1).innerHTML = bandwidth_Label(st[i].upload);
					tr.insertCell(-1).innerHTML = bandwidth_Label(st[i].download);
					tr.insertCell(-1).innerHTML = timestr;
				}

				if( tb.rows.length == 1 )
				{
					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row';

					var td = tr.insertCell(-1);
						td.colSpan = 6;
						td.innerHTML = '<em><br /><%:没有客户端连接.%></em>';
				}
			}
		}
	);
	
	function bandwidth_Label(bytes) {
		var uby = '<%:KB%>';
		var kby = (bytes / 1024);

		if (kby >= 1024)
		{
			uby = '<%:MB%>';
			kby = (kby / 1024);
		}
		
		return String.format("%f %s",kby.toFixed(2), uby);
	}
//]]></script>

<fieldset class="cbi-section">
	<legend><%:已认证客户端%></legend>
	<table class="cbi-section-table" id="client-list">
		<tr class="cbi-section-table-titles">
			<th class="cbi-section-table-cell"><%:主机名%></th>
			<th class="cbi-section-table-cell"><%:IP 地址%></th>
			<th class="cbi-section-table-cell"><%:MAC 地址%></th>
			<th class="cbi-section-table-cell"><%:上传%></th>
			<th class="cbi-section-table-cell"><%:下载%></th>
			<th class="cbi-section-table-cell"><%:在线时长%></th>			
		</tr>
		<tr class="cbi-section-table-row">
			<td colspan="6"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</fieldset>
